<template>
  <div class="mine-content">
    <MineHeader />
    <div class="setting-icon">
      <van-icon name="setting-o" size="25px" />
    </div>
    <div style="height:10px; background:#f2f2f2;"></div>
    <div class="item-header-title">我的订单</div>
    <div class="order-item-view">
      <div class="order-item">
        <van-icon name="coupon-o" size="27px" />挂号
      </div>
      <div class="order-item">
        <van-icon name="comment-o" size="27px" />问诊
      </div>
      <div class="order-item">
        <van-icon name="cart-circle-o" size="27px" />商品
      </div>
      <div class="order-item">
        <van-icon name="apps-o" size="27px" />全部
      </div>
    </div>
    <div style="height:10px; background:#f2f2f2;"></div>
    <div class="item-header-title">常用功能</div>
    <div class="common-list-view">
      <div class="common-item" v-for="item in commontList" :key="item.title">
        <div class="common-item-style order-item">
            <van-icon :name="item.iconname" size="27px" />{{item.title}}
        </div>
      </div>
    </div>
    <div style="height:10px; background:#f2f2f2;"></div>
    <div class="item-header-title">我的社区</div>
    <div class="order-item-view">
      <div class="order-item">
        <van-icon name="browsing-history-o" size="27px" />我的关注
      </div>
      <div class="order-item">
        <van-icon name="question-o" size="27px" />我的评论
      </div>
      <div class="order-item">
        <van-icon name="edit" size="27px" />我的发帖
      </div>
      <div class="order-item">
        <van-icon name="apps-o" size="27px" />更多
      </div>
    </div>
  </div>
</template>

<script>
import MineHeader from "./components/MineHeader";
export default {
  name: "Mine",
  components: {
    MineHeader
  },
  data() {
    return {
      commontList: [
        {
          iconname: "friends-o",
          title: "家庭联系人"
        },
        {
          iconname: "star-o",
          title: "关注收藏"
        },
        {
          iconname: "logistics",
          title: "我的医生"
        },
        {
          iconname: "records",
          title: "我的处方单"
        },
        {
          iconname: "manager-o",
          title: "健康管家"
        },
        {
          iconname: "service-o",
          title: "健康运动"
        },
        {
          iconname: "question-o",
          title: "帮助反馈"
        },
        {
          iconname: "apps-o",
          title: "更多"
        }
      ]
    };
  }
};
</script>

<style scoped>
.mine-content {
  overflow: hidden;
}
.setting-icon {
  position: fixed;
  right: 15px;
  top: 15px;
  color: white;
}
.order-item-view {
  height: 80px;
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 14px;
}
.order-item {
  display: grid;
  text-align: center;
  align-content: center;
  color: #333333;
  flex: 1;
}
.common-item{
  display: grid;
  text-align: center;
  align-content: center;
  color: #333333;
  width: 25%;
  height: 80px;
  font-size: 13px;
  /* padding-bottom: 25%;
  border-radius: 50%; */
}
.item-header-title {
  margin-top: 10px;
  /* margin-bottom: 10px; */
  padding-bottom: 10px;
  text-align: center;
  color: #333333;
  font-size: 15px;
  border-bottom: solid 1px #f2f2f2;
}
.common-list-view {
  /* margin-left: 15px; */
  margin-bottom: 15px;
  /* margin-top: 10px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.common-item-style{
  /* position: fixed;;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; */
  }
</style>